<script lang="ts" setup>
/**
 * Props
 * @type 开关类型
 * 默认 switch 可选 switch | box | round
 *
 * @color 开关颜色
 * 默认 #ff002
 *
 * @size 开关尺寸
 * 默认 S 可选 L | M | S
 *
 * @value 默认开关状态
 *
 * Emits
 * @value 返回当前开关状态
 *
 * Expose
 * @change 手动改变当前开关状态
 * *
 * @disabled 是否禁用
 *
 */
import { ref, watch } from 'vue'
import Icon from '@C/Icon.vue'
import { IObj, PropType } from '@/interface'

const props = defineProps({
  position: {
    type: String as PropType<'left' | 'center' | 'right'>,
    required: false,
    default: 'center',
  },
  color: {
    type: String,
    required: false,
    default: '#1890FF',
  },
  size: {
    // SS 目前只有type为box时有效
    type: String as PropType<'L' | 'M' | 'S' | 'SS'>,
    required: false,
    default: 'S',
  },
  type: {
    type: String as PropType<'switch' | 'box' | 'round'>,
    required: false,
    default: 'switch',
  },
  value: {
    type: Boolean,
    required: false,
    default: false,
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false,
  },
})
const emits = defineEmits(['value'])
defineExpose({
  change,
  changeSwitchMore,
})
// 当前开关状态
const act = ref(props.value)
function change(v: boolean) {
  act.value = v
}
const changeSwitch = (e:IObj) => {
  act.value = e.detail.value
}
function changeSwitchMore() {
  act.value = !act.value
}
// const changeSwitchMore = () => {
//   act.value = !act.value
// }
watch(
    () => act.value,
    (newVal: boolean) => {
      emits('value', newVal)
    },
)
watch(
    () => props.value,
    (newVal: boolean) => {
      act.value = newVal
    },
)
// size
const _size = () => {
  switch (props.type) {
    case 'switch':
      switch (props.size) {
        case 'L': return 'scale(1)'
        case 'M': return 'scale(0.8)'
        case 'S': return 'scale(0.6)'
      }
      break
    case 'box':
      switch (props.size) {
        case 'L': return '80rpx'
        case 'M': return '50rpx'
        case 'S': return '40rpx'
        case 'SS': return '28rpx'
      }
      break
    case 'round':
      switch (props.size) {
        case 'L': return '80rpx'
        case 'M': return '50rpx'
        case 'S': return '40rpx'
      }
      break
  }
}
</script>

<template>
  <div class="prm-switch">
    <switch v-if="type === 'switch'" :checked="act" :color="color" :disabled="disabled" :style="{transform: _size()}" @change="changeSwitch" />
    <div
      v-if="type !== 'switch'"
      :class="{'prm-switch-more': true, 'prm-switch-box': type === 'box', 'prm-switch-round': type === 'round'}"
      :style="{width: _size(), height: _size(), background: type === 'box' && act ? color : 'transparent', borderColor: act ? '#1890FF' : '#48484a'}"
      @tap.stop="changeSwitchMore"
    >
      <div v-if="type === 'box'" :style="{opacity: act ? 1 : 0}" class="_box">
        <Icon :size="`calc(${_size()} - 12rpx)`" name="icon-dui" />
      </div>
      <div v-if="type === 'round'" :style="{width: `calc(${_size()} - 18rpx)`, height: `calc(${_size()} - 18rpx)`, background: act ? color : 'transparent'}" class="_round" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.prm-switch-more {
  border: 2rpx solid;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
.prm-switch-box {
  border-radius: 8rpx;
}
.prm-switch-round {
  border-radius: 50%;
}
._box {
  display: flex;
  justify-content: center;
  align-items: center;
}
._round {
  border-radius: 50%;
  overflow: hidden;
  transition: all .3s;
}
</style>
